<template>
  <div class="BaseMapaddress">
    <scroll-view scroll-x class="bg-white nav">
      <view class="flex text-center">
        <view
          class="cu-item flex-sub"
          :class="index == TabCur ? 'text-orange cur' : ''"
          v-for="(item, index) in tabItem"
          :key="index"
          @tap="tabSelect"
          :data-id="index"
        >
          <span :style="index == TabCur ? 'color: #000;' : 'color: #5a5a5a;'">{{
            item.title
          }}</span>
        </view>
      </view>
    </scroll-view>
    <div class="dataBox">
      <div class="item" v-for="(v, i) in List" :key="i" @click="seeAddress(v)">
        <div class="left">
          <image :src="checkicon(v.title)" />
          <div>{{ v.title }}</div>
        </div>
        <div class="right">
          <image
            src="https://fangguaner.wm76.mtnet.ren/static/applet/image/address.png"
          />
          <div>{{ v._distance }} m</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      TabCur: 0,
      scrollLeft: 0,

      page: 0,
      List: [],
      icon: [
        {
          icon: "https://fangguaner.wm76.mtnet.ren/static/applet/image/bus.png",
          title: "公交",
        },
        {
          icon: "https://fangguaner.wm76.mtnet.ren/static/applet/image/dt.png",
          title: "地铁",
        },
        {
          icon: "https://fangguaner.wm76.mtnet.ren/static/applet/image/yy.png",
          title: "医院",
        },
        {
          icon: "https://fangguaner.wm76.mtnet.ren/static/applet/image/yh.png",
          title: "银行",
        },
        {
          icon: "https://fangguaner.wm76.mtnet.ren/static/applet/image/yl.png",
          title: "休闲娱乐",
        },
        {
          icon: "https://fangguaner.wm76.mtnet.ren/static/applet/image/cy.png",
          title: "餐饮",
        },
      ],
    };
  },
  props: {
    //经纬度 必填
    lat: {
      type: String,
    },
    //经纬度 必填
    lng: {
      type: String,
    },
    //需要展示的分类
    // 格式
    // [
    //     { title: "公交" },
    //     { title: "地铁" },
    //     { title: "医院" },
    //     { title: "银行" },
    //     { title: "休闲娱乐" },
    //     { title: "餐饮" },
    //   ]
    tabItem: {
      type: Array,
    },
  },
  mounted() {
    var a = setInterval(() => {
      if (this.lat && this.lng) {
        clearInterval(a);
        this.getNearbyData();
      }
    }, 100);
  },
  methods: {
    //查看附近点击的地点
    seeAddress(add) {
      uni.openLocation({
        latitude: add.location.lat,
        longitude: add.location.lng,
        name: add.title,
        address: add.address,
      });
    },
    //哪个图标
    checkicon() {
      let url = "";
      this.icon.forEach((v) => {
        if (v.title == this.tabItem[this.TabCur].title) {
          url = v.icon;
        }
      });
      return url;
    },
    // 初始化分页分类
    init() {
      this.List = [];
      this.getNearbyData();
    },
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
      this.init();
    },
    //调用腾讯接口查询附近数据
    getNearbyData() {
      uni.showLoading({
        title: "获取中",
        mask: true,
      });
      uni.request({
        url: `https://apis.map.qq.com/ws/place/v1/search`, //仅为示例，并非真实接口地址。
        method: "GET",
        data: {
          key: "ZWEBZ-R7N3U-BJSVH-4TCR3-66MDQ-S3FDJ",
          boundary: `nearby(${this.lat},${this.lng},1000,1)`,
          keyword: encodeURI(this.tabItem[this.TabCur].title),
          page_size: 5,
        },
        success: (res) => {
          uni.hideLoading();
          this.List = res.data.data;
          // console.log(this.List);
        },
        fail: (err) => {
          uni.hideLoading();
          // debugger;
        },
      });
    },
  },
};
</script>

<style scoped>
.cu-item {
  color: #5e5e5e !important;
}
.text-orange {
  color: #dd282e !important;
  font-size: 30rpx;
  font-weight: bold;
}

.BaseMapaddress {
  padding-bottom: 40rpx;
  box-sizing: border-box;
}

.dataBox {
  padding: 20rpx 18rpx;
  box-sizing: border-box;
  background: #fff;
  /* border: 1px solid red; */
}
.dataBox .item {
  display: flex;
  justify-content: space-between;
  padding-top: 15rpx;
  padding-bottom: 15rpx;
  box-sizing: border-box;
  font-size: 22rpx;
  font-weight: normal;
  font-stretch: normal;
  line-height: 49rpx;
  letter-spacing: 0rpx;
  color: #333333;
  border-bottom: 1rpx solid #e5e5e5;
}
.dataBox .item:nth-last-child(1) {
  border-bottom: none !important;
}
.dataBox .item .left {
  display: flex;
  align-items: center;
}
.dataBox .item .right {
  display: flex;
  align-items: center;
}
.dataBox .item .left image {
  width: 28rpx;
  height: 28rpx;
  margin-right: 20rpx;
}

.dataBox .item .right image {
  width: 24rpx;
  height: 30rpx;
  margin-right: 20rpx;
}

.dataBox .item .right div {
  width: 120rpx;
  text-align: left;
}
</style>